<template>
	<el-card class="box-card">
		<view slot="header" class="header">
			<text class="header-title">用户性别分布</text>
			<el-button style="padding: 3px 0" type="text"></el-button>
		</view>
		<view class="box-card-body" style="height: 300px;">
			<qiun-data-charts type="pie" :opts="data.opts" :localdata="data.list" />
		</view>
	</el-card>
</template>

<script>
export default {
	name: "getUserGenderCountGroup",
	props: {

	},
	data() {
		return {
			data:{
				list:[],
				opts: {
					color: ["#FAC858","#1890FF","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [5,5,5,5],
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			},
			loading:false,
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.getList();
		},
		getList(){
			let that = this;
			vk.callFunction({
				url: 'admin/business/kh/stats.getUserGenderCountGroup',
				data: {},
				success: (data) => {
					that.data.list = data.list;
				}
			});
		}
	},
	watch: {

	},
	computed: {

	}
};
</script>
<style lang="scss" scoped>
@import "@/pages/stats/common/css/index.scss";
</style>
